<template>
  <div class="padding_20">
    <el-input v-model="searchParams"
              placeholder="请输入试纸名称"
              class="w-200"
              clearable
              @clear="query" />
    <el-button type="primary"
               @click="query">查 询</el-button>
    <el-button type="primary"
               @click="edit(null)">新 增</el-button>
    <el-table :data="dataList"
              border
              :span-method="handleSpan"
              style="width: 100%;"
              class="mt-20">
      <el-table-column align="center"
                       prop="name"
                       label="试纸名称"
                       min-width="100">
      </el-table-column>
      <el-table-column align="center"
                       prop="enName"
                       label="生产厂商"
                       min-width="120">
        <template slot-scope="scope">
          <span>{{scope.row.testStripFactoryDto.factoryName}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center"
                       prop="address"
                       label="生产许可证"
                       min-width="120">
        <template slot-scope="scope">
          <span>{{scope.row.testStripFactoryDto.productLicenseName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="creditCode"
                       label="注册证"
                       min-width="120">
        <template slot-scope="scope">
          <span>{{scope.row.testStripFactoryDto.medicalDeviceCertificateName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="edit(scope.row.id)">编 辑
          </el-button>
          <!-- <el-button size="mini"
                     type="danger"
                     :disabled="scope.row.testStripFactoryDto.deviceId == undefined ? false : true"
                     @click="deleteData(scope.row.id)">删除
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <page @getList="getList"
          :pageTotal="totals"
          ref="page">
    </page>
    <!-- 添加弹窗 -->
    <el-dialog title="试纸厂商管理详情"
               width="50%"
               :close-on-click-modal="false"
               :visible.sync="dialogFormVisible">
      <el-form :model="addParams"
               :rules="rules"
               ref="ruleFormRef">
        <el-form-item :label-width="formLabelWidth"
                      label="试纸名称："
                      prop="name">
          <el-input v-model="addParams.name"
                    class="w-500"
                    placeholder="请输入试纸名称"></el-input>
        </el-form-item>
        <el-button type="primary"
                   icon="el-icon-plus"
                   size="mini"
                   style="margin-bottom:20px;margin-left:30px"
                   @click="handleAdd">添加</el-button>
        <el-table border
                  style="width:95%; margin-left:30px"
                  :data="addParams.testStripFactoryDtos">
          <el-table-column label="生产厂商">
            <template slot-scope="scope">
              <el-select v-model="scope.row.factoryId"
                         placeholder="请选择生产厂商"
                         filterable
                         @change="handleManufacturer"
                         :disabled="scope.row.deviceId == undefined ? false : true">
                <el-option v-for="item in manufacturerList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="许可证">
            <template slot-scope="scope">
              <el-select v-model="scope.row.productionLicenseId"
                         placeholder="请选择许可证"
                         filterable
                         @change="handleProductLicensePage"
                         :disabled="scope.row.deviceId == undefined ? false : true">
                <el-option v-for="item in licenseList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="注册证">
            <template slot-scope="scope">
              <el-select v-model="scope.row.medicalDeviceCertificateId"
                         placeholder="请选择注册证"
                         :disabled="scope.row.deviceId == undefined ? false : true">
                <el-option v-for="item in certificateList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-select v-model="scope.row.status"
                         placeholder="请选择状态">
                <el-option v-for="item in statusList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="100">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="danger"
                         :disabled="scope.row.deviceId == undefined ? false : true"
                         @click="handleDelete(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="saveData()">保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'

  export default {
    name: "factoryList",
    data () {
      return {
        searchParams: '',
        formLabelWidth: '100px',
        dataList: [],
        manufacturerList: [], // 生产厂商
        licenseList: [], // 许可证
        certificateList: [], // 注册证
        statusList: [ // 状态
          {
            value: 0,
            label: '正常'
          }, {
            value: 1,
            label: '不可用'
          }
        ],
        pageSize: 20,
        totals: 0,
        dialogFormVisible: false,
        addParams: {
          id: '',
          name: '', // 试纸名称
          testStripFactoryDtos: []
        },
        rules: {
          name: [
            { required: true, message: '请输入试纸名称', trigger: 'blur' },
            { max: 100, message: '长度在100字以内', trigger: 'blur' }
          ]
        },
        factoryId: '',
        productLicenseId: ''
      }
    },
    created () {
      this.getList();
    },
    methods: {
      // 查询
      query () {
        this.page.pageIndex = 0;
        this.getList();
      },
      // 获取列表
      getList () {
        let param = {
          name: this.searchParams,
          pageSize: this.page.pageSize,
          pageIndex: this.page.pageIndex
        };
        this.post(this.api.testStrip.getNewPageApp, param).then((res) => {
          if (res.data.code === '200') {
            this.dataList = res.data.object;
            this.totals = res.data.totalNum;
          }
        });
      },
      // 查询厂商列表
      async getFactoryList () {
        const { data: res } = await this.post(this.api.factory.getFactoryList, {
          name: '',
          pageIndex: 0,
          pageSize: 1000,
        })
        if (res.code === '200') {
          this.manufacturerList = res.object
        }
      },
      // 选择厂商
      handleManufacturer (val) {
        this.factoryId = val
        this.productLicenseId = ''
        this.getProductLicensePage()
      },
      // 查询生产许可证
      async getProductLicensePage () {
        const { data: res } = await this.post(this.api.testStrip.getProductLicensePage, {
          factoryId: this.factoryId,
          name: ''
        })
        if (res.code === '200') {
          this.licenseList = res.object
        }
      },
      // 选择生产许可证
      handleProductLicensePage (val) {
        this.productLicenseId = val
        this.getCertificatePage()
      },
      // 查询医疗器械注册证
      async getCertificatePage () {
        const { data: res } = await this.post(this.api.testStrip.getCertificatePage, {
          factoryId: this.factoryId,
          productLicenseId: this.productLicenseId,
          name: ''
        })
        if (res.code === '200') {
          this.certificateList = res.object
        }
      },
      // 查询详情
      edit (id) {
        this.dialogFormVisible = true;
        this.getFactoryList();
        if (id) {
          this.post(this.api.testStrip.getTestStripInfoDetail, {
            id: id
          }).then((res) => {
            if (res.data.code === '200') {
              let resData = res.data.object;
              this.addParams = resData;
              this.addParams.testStripFactoryDtos = resData.testStripFactoryDtos;
              this.getProductLicensePage();
              this.getCertificatePage();
            }
          });
        } else {
          this.addParams.name = '';
          this.addParams.testStripFactoryDtos = [];
        }
      },
      // 删除数据
      deleteData (id) {
        this.post(this.api.factory.deleteFactory, { id: id }).then((res) => {
          if (res.data.code === '200') {
            this.getList();
          }
        });
      },
      tableBalidate () {

      },
      // 动态添加行
      handleAdd () {
        let res = this.addParams.testStripFactoryDtos
        if (res.length > 0) {
          let item = res[res.length - 1]
          if (item.factoryId === '') {
            this.$message.error('请填写生成厂商');
            return
          }
          if (item.productionLicenseId === '') {
            this.$message.error('请填写生许可证');
            return
          }
          if (item.medicalDeviceCertificateId === '') {
            this.$message.error('请填写注册证');
            return
          }
          if (item.status === '') {
            this.$message.error('请选择状态');
            return
          }

          this.addParams.testStripFactoryDtos.push({
            factoryId: '', // 生产厂商
            productionLicenseId: '', // 许可证
            medicalDeviceCertificateId: '', // 注册证
            status: '' // 状态
          })

        } else {
          this.addParams.testStripFactoryDtos.push({
            factoryId: '', // 生产厂商
            productionLicenseId: '', // 许可证
            medicalDeviceCertificateId: '', // 注册证
            status: '' // 状态
          })
        }
      },
      // 删除生成厂商
      async handleDelete (index) {
        this.addParams.testStripFactoryDtos.splice(index, 1);
      },
      // 单元格合并行
      handleSpan ({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 || columnIndex === 4) {
          if (row.rowspan) {
            if (row.rowspan == -1) {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
            if (row.rowspan > 1) {
              return {
                rowspan: row.rowspan,
                colspan: 1
              };
            }
          } else {
            return {
              rowspan: 1,
              colspan: 1
            };
          }
        }
      },
      // 提交数据
      saveData () {
        this.$refs['ruleFormRef'].validate((valid) => {
          if (valid) {
            let res = this.addParams.testStripFactoryDtos
            if (res.length > 0) {
              let item = res[res.length - 1]
              if (item.factoryId === '') {
                this.$message.error('请填写生成厂商');
                return
              }
              if (item.productionLicenseId === '') {
                this.$message.error('请填写生许可证');
                return
              }
              if (item.medicalDeviceCertificateId === '') {
                this.$message.error('请填写注册证');
                return
              }
              if (item.status === '') {
                this.$message.error('请选择状态');
                return
              }
              this.post(this.api.testStrip.uploadTestStrip, this.addParams).then((res) => {
                if (res.data.code === '200') {
                  this.getList();
                  this.dialogFormVisible = false;
                } else {
                  this.$message.error(res.data.message);
                }
              });
            } else {
              this.$message.error('至少存在一家生产厂商');
            }
          }
        })
      }
    },
    computed: {
      ...mapGetters(['page'])
    },
    components: {
      Page,
    }
  }
</script>

<style scoped lang="scss">
  .w-500 {
    width: 500px;
  }
</style>
